<!-- 编辑 -->
<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		title="编辑"
		v-model="isVisible"
		destroy-on-close
		width="500px"
		:draggable="true"
	>
		<el-form ref="form" :model="state.form" label-position="right" label-width="100px">
			<el-form-item label="设备编号" prop="deviceCode">
				<el-input  v-model="state.form.deviceCode" />
			</el-form-item>

			<el-form-item label="厂家" prop="deviceModel">
				<el-radio-group v-model="state.form.deviceModel">
					<el-radio v-for="item in deviceModel" :label="item.name" :key="item.name">
						{{ item.name }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="设备类型" prop="deviceType">
				<el-radio-group v-model="state.form.deviceType">
					<el-radio v-for="item in deviceType" :label="item.name" :key="item.name">
						{{ item.name }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="平台" prop="platformId">
				<el-radio-group v-model="state.form.platformId" @change="platformChange">
					<el-radio v-for="item in platform" :label="item.orgId" :key="item.orgName + item.orgId">
						{{ item.orgName }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="备注" prop="remark">
				<el-input v-model="state.form.remark" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button plain type="warning" @click="isVisible = false"> 取消</el-button>
			<el-button plain type="primary" @click="update"> 确定</el-button>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup name="DeviceEdit">
import { computed, onMounted, reactive } from 'vue';
import deviceApi from '/@/api/smoke/device';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['close', 'success']);

// props
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false,
	},
	rowData: <any>{
		type: Object,
	},
});

const platform = [
	{
		orgId: 2,
		orgName: '开发平台',
	},
	{
		orgId: 6,
		orgName: '测试平台',
	},
	{
		orgId: 3,
		orgName: '工作平台',
	},
];

const deviceModel = [
	{
		name: 'M1',
	},
	{
		name: 'M3',
	},
	{
		name: 'M4',
	},
];

const deviceType = [
	{
		name: 'POE',
	},
	{
		name: '4G',
	},
];

let state = reactive({
	form: initForm(),
});

onMounted(() => {
	{
		state.form = initForm();
	}
});

const isVisible = computed({
	get: () => {
		return props.dialogVisible;
	},
	set: () => {
		close();
	},
});

function initForm() {
	const { id, deviceCode, deviceModel, deviceType, platformId, platformName, remark } = props.rowData;
	return {
		id,
		deviceCode,
		deviceModel,
		deviceType: deviceType == 'SIM' ? '4G' : deviceType,
		platformId,
		platformName,
		remark,
	};
}

function platformChange(value: number) {
	let curOrg = platform.filter((item: any) => {
		return item.orgId == value;
	});

	state.form.platformName = curOrg[0].orgName;
}

// 对话框关闭
function close() {
	emit('close');
}

// 修改
function update() {
	let postData = JSON.parse(JSON.stringify(state.form));
	if (postData.remark.trim() == '') postData.remark = null;
	deviceApi.update(postData).then((res) => {
		ElMessage.success('更新成功');
		emit('success');
	});
}
</script>